<script setup>
import { ref, onMounted, onUnmounted, onBeforeUpdate } from "vue"
import colorfulFont from "@/components/colorfulFont.vue"
import { useRouter } from "vue-router"
import { useIndexStore } from "@/store/index"
import { usejianli_worksStore } from "@/store/jianli/works"

onMounted(() => {
	Timer.value = setInterval(() => {
		number.value++
		if (number.value >= 3) {
			number.value = 0
		}
	}, 5000)
})

onUnmounted(() => {
	clearInterval(Timer.value)
})

onBeforeUpdate(() => {
	animation_num.value++
})

const works = usejianli_worksStore()
const indexStore = useIndexStore()
const router = useRouter()
const number = ref(0)
const Timer = ref(null)
const animation_num = ref(0)

const bn_works_item_xczt_showFont_list = ref([
	"炫彩字体",
	"可自己更换色彩",
	"方便好用",
])

const detail = (item) => {
	if ([1, 2].includes(item.id)) {
		router.push({
			name: item.toName,
		})
		indexStore.setIndexState({
			navWidth: "26%",
			navOpacity: 1,
			header_nav_bar_active: item.header_select,
		})
		indexStore.setHeader_nav_list(item.toName)
	} else if (item.id == 3) {
		location.href = item.toName
	}
}

const getStyle = (item) => {
	let style = {}
	if (animation_num.value == 0) {
		if (item.id == 2) {
			style.animation = "bounceInDown 2s forwards"
		} else if (item.id == 5) {
			style.animation = "bounceInUp 2s forwards"
		} else if (item.id == 1 || item.id == 4) {
			style.animation = "bounceInLeft 2s forwards"
		} else {
			style.animation = "bounceInRight 2s forwards"
		}
	} else {
		return
	}
	return style
}

const bn_works_item_mouseover = (e) => {
	e.target.style.animation = "none"
}
</script>
<template>
	<div class="bn-works">
		<div class="body">
			<div
				class="bn-works-item"
				v-for="item in works.bn_works_list"
				:key="item.id"
				:style="getStyle(item)"
				@mouseover="bn_works_item_mouseover"
				@click="detail(item)">
				<div class="show-box" :class="item.className">
					<colorfulFont
						:msg="bn_works_item_xczt_showFont_list[number]"
						className="showFont"
						v-if="item.id == 2" />
					<div class="ym1" v-if="item.id == 3"></div>
					<div class="ym2" v-if="item.id == 3"></div>
				</div>
				<div class="title">{{ item.title }}</div>
				<div class="label">{{ item.label }}</div>
			</div>
		</div>
	</div>
</template>
<style scoped lang="scss">
@keyframes ym {
	0% {
		transform: translate(0);
	}
	30% {
		transform: translate(0);
	}
	60% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(100%);
	}
}
@keyframes ym1 {
	0% {
		transform: translate(0);
	}
	30% {
		transform: translate(0);
	}
	60% {
		transform: translateY(-200%);
	}
	100% {
		transform: translateY(-200%);
	}
}
.bn-works {
	flex: 1;
	height: inherit;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	.body {
		height: 100%;
		width: 80%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		.bn-works-item {
			$margin: 10px;
			width: calc((100% - 6 * $margin) / 3);
			height: calc((100% - 6 * $margin) / 2);
			margin: $margin;
			border: 1px solid $all-border-color;
			border-radius: 5px;
			box-shadow: -8px -8px 15px $show-box-bg-color;
			transition: all $animation-duration-1;
			&::after {
				content: "前去查看→";
				font-size: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				position: relative;
				top: -100%;
				height: 60%;
				z-index: 100;
				opacity: 0;
				animation: pulse $animation-duration-2 $animation-ease-linear;
			}
			&:hover::after {
				opacity: 1;
			}
			&:hover {
				transform: scale(0.9);
				box-shadow: 8px 8px 15px $show-box-bg-color;
			}
			.show-box {
				height: 60%;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				.showFont {
					height: 100%;
					width: 100%;
					font-size: 50px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.ym1 {
					height: 100%;
					width: 100%;
					background-image: url("../../../../public/images/ym1.png");
					background-size: 100% 100%;
					border-radius: 5px;
					position: relative;
					top: -100%;
					animation: ym 15s infinite forwards alternate;
					&::after {
						content: "";
						display: block;
						height: 100%;
						width: 100%;
						background-image: url("../../../../public/images/ym2.png");
						background-size: 100% 100%;
						border-radius: 5px;
						position: relative;
						left: 0px;
						top: 100%;
						animation: ym1 15s infinite forwards alternate;
					}
				}
			}
			.title {
				font-size: 35px;
				height: 15%;
				border-top: 1px solid $all-border-color;
				text-align: center;
			}
			.label {
				height: 25%;
				font-size: 20px;
				text-indent: 2em;
				padding-top: 10px;
			}
		}
	}
}
</style>
